<template>

  <div class="calendar_main main_container">
    <div class="main_header">
      <div class="padding_container">
        <div class="left"><Breadcrumb /></div>
        <div class="right">
          <a class="right_button" @click="workTimeSetting">
            <svg-icon icon-class="工作时间设置" />
            工作时间设置
          </a>
        </div>
      </div>
    </div>
    <div class="main_main">
      <el-calendar v-model="todayData">
        <template
          slot="dateCell"
          slot-scope="{date, data}"
        >
          <div class="day_div" :class="itemClass(data.day)" @click="daySetting(data.day)">
            <div class="day_div_left">
              {{ data.day.split('-')[data.day.split('-').length-1] }}
            </div>
            <div class="day_div_right">
              {{ tableData.length>0&&tableData.filter(item => item.dateStr == data.day).length>0?tableData.filter(item => item.dateStr == data.day)[0].type:'' }}
            </div>
          </div>
        </template>
      </el-calendar>
    </div>

  </div>
</template>

<script>
import { list } from '@/api/system/calendar'
import { mapGetters } from 'vuex'
import moment from 'moment'
import WorkTimeSetting from './workTimeSetting'
import DaySetting from './daySetting'
export default {
  name: 'Index',
  computed: {
    ...mapGetters([
      'userId', 'userName', 'companyId'
    ])
  },
  watch: {
    todayData(data) {
      this.currentMonth = moment(data).format('YYYY年MM月')
      list({ searchTime: moment(data).format('YYYY年MM月') }).then(res => {
        this.tableData = res.data
      })
    }
  },
  data() {
    return {
      todayData: undefined,
      currentMonth: moment(new Date()).format('YYYY年MM月'),
      tableData: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {

    getList() {
      list({ searchTime: this.currentMonth }).then(res => {
        this.tableData = res.data
      })
    },
    itemClass(day) {
      if (this.tableData.filter(item => item.dateStr == day).length > 0 && this.tableData.filter(item => item.dateStr == day)[0].type == '工作日') {
        return 'work_day'
      }
      if (this.tableData.filter(item => item.dateStr == day).length > 0 && this.tableData.filter(item => item.dateStr == day)[0].type == '休息日') {
        return 'free_day'
      }
    },
    workTimeSetting() {
      this.$layer.iframe({// 弹框
        content: {
          content: WorkTimeSetting, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
          }// props
        },
        area: ['880px', '600px'],
        title: '工作时间设置', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    daySetting(day) {
      this.$layer.iframe({// 弹框
        content: {
          content: DaySetting, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            row: this.tableData.filter(item => item.dateStr == day)[0]
          }// props
        },
        area: ['880px', '600px'],
        title: this.tableData.filter(item => item.dateStr == day)[0].dateStr, // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    }
  }
}
</script>

<style lang="less" scoped>
.calendar_main{
  .main_header{
    .right_button{
      color: #333333;
      padding: 0px 15px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      font-size: 14px;
      /deep/ .svg-icon{
        margin-right: 10px;
      }
    }
    .right_button:hover{
      background-color: rgba(56,123,252,.5);
      color: #fff;
    }
  }
  .main_main{
    height: calc(100% - 70px);
    /deep/ .el-calendar__header{
      .el-button{
        font-size: 16px;
        color: #333333;
      }
      .el-button:hover{
        background-color: #B0C8F1;
      }
      .el-button:focus{
        background-color: #B0C8F1;
      }
      .el-button:active{
        border: 1px solid #dcdfe6;
      }
    }
    /deep/ .el-calendar-table td.is-today{
      color: unset;
    }
    /deep/ .el-calendar-table td.is-today .day_div_left{
      color: #387BFC;
    }
    /deep/ .el-calendar-table{
      tr td:first-child {
        border-left: 2px solid #BACBEC;
      }

      tr:first-child td {
        border-top: 2px solid #BACBEC;
      }

      td {
        border-bottom: 2px solid #BACBEC;
        border-right: 2px solid #BACBEC;
      }
    }
    /deep/ .el-calendar__body{
      padding: 12px 20px;
    }
    .day_div{
      display: flex;
      justify-content: space-between;
      height: 100%;
      .day_div_left{
        display: flex;
        align-items: flex-start;
        font-size: 32px;
        margin-left: 10px;
        margin-top: 5px;
      }
      .day_div_right{
        display: flex;
        align-items: flex-end;
        justify-items: flex-end;
        font-size: 24px;
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
    .day_div:hover{
      background-color: rgba(56, 123, 252, 0.5);
      color: white;
      .day_div_right{
        color: white;
      }
    }
    /deep/ .el-calendar-table__row{
      td.is-selected{
        .day_div{
          background-color: rgba(56, 123, 252, 0.5);
          color: white;
          .day_div_right{
            color: white;
          }
        }
      }
    }
    .work_day{
      background-color: #F2F8FE;
      .day_div_right{
        color: #387BFC;
      }
    }
    .free_day{
      background-color: #E3E8ED;
      .day_div_right{
        color: #999999;
      }
    }
    .prev,.next{
      .work_day{
        .day_div_right{
          color: rgba(56, 123, 252, 0.5);
        }
      }
      .free_day{
        .day_div_right{
          color: rgba(153, 153, 153, 0.5);
        }
      }
    }
    /deep/ .el-calendar-day{
      padding: 0;
      height: 115px;
    }
  }
}
</style>
